<template>
    <div id="app" class="pdf_main">
        <!-- <el-tag @click="index">拖拽首页</el-tag>
    <el-tag @click="form">拖拽表单</el-tag>
    <el-tag @click="create">element表单创建器</el-tag>
    <el-button @click="but">点击</el-button>-->
        <div class="pdf_dialog_main">
            <div class="pdf_left_btn">
                <div @click="pageChange(-1)" :class="{ page_button: true, hoverClass: page > 1 }">
                    <i class="el-icon-arrow-left" />
                </div>
            </div>
            <div class="pdf_content" id="pdf_content" :style="'width: 800px'">
                <div @mousewheel="mousewheel" v-if="notSchema" style="padding: 10px; box-sizing: border-box; height: 782px; width: 578px">
                    <div @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" id="pdf_div" class="pdf_div" style="width: 518px; height: 740px">
                        <!-- <img v-show="isError" width="500px" style="margin-top: 100px;" src="../../static/404.jpg" /> -->
                        <pdf ref="vuePdf" id="vuePdf" :src="srcResult" :scale="zoom" :page="page" :onError="pdfError" :onLoad="pdfLoad" :rotate="rotateNum"></pdf>
                    </div>
                </div>
                <div v-else style="padding: 10px; overflow: auto; box-sizing: border-box; height: 782px">
                    <!--<pre>{{oneFormInfo}}</pre>-->
                </div>
                <div class="pdf_footer" :style="{ 'flex-direction': notSchema ? 'row' : 'row-reverse' }">
                    <div class="pdfMenu" :style="{ top: '-220px' }">
                        <div id="pdfRotate" @click="rotate">
                            <i class="el-icon-refresh" />
                        </div>
                        <div id="pdfBig" @click="big">
                            <i class="el-icon-plus" />
                        </div>
                        <div id="pdfSmall" @click="small">
                            <i class="el-icon-minus" />
                        </div>
                    </div>
                    <!--            <div class="bottom_btn" :style="ispdf?'':'width:700px'">-->
                    <div class="bottom_btn">
                        <el-button class="my-btn my-btn-primary" id="pdfShowPdfOrImg" @click="showPdfOrImg" type="primary">返回</el-button>
                        <el-button class="my-btn my-btn-default" id="pdfDownLoadPdf" @click="downLoadPdf" type="primary">下载</el-button>
                        <el-button class="my-btn my-btn-primary" id="pdfPrint" @click="print" type="primary">打印</el-button>
                        <el-button class="my-btn my-btn-primary" id="pdfClose" @click="close">关闭</el-button>
                    </div>
                </div>
            </div>
            <div class="pdf_left_btn">
                <div @click="close" class="page_button hoverClass el-close">
                    <i class="el-icon-close" />
                </div>
                <div
                    v-if="ispdf && !isHtml"
                    @click="pageChange(1)"
                    :class="{
                        page_button: true,
                        hoverClass: page < total,
                        'page_button-right': true
                    }"
                >
                    <i class="el-icon-arrow-right" />
                </div>
            </div>
        </div>
        <div class="bottom_page">
            <el-button id="pdfToPage" @click="prev">上一页</el-button>
            <el-button id="pdfToPage" @click="next">下一页</el-button>
            <el-button @click="down">下载</el-button>
        </div>
        <!-- <router-view></router-view> -->
    </div>
</template>
<script>
import pdf from './pdfView.vue';
export default {
    data() {
        return {
            notPreview: false,
            isAccept: false,
            page1: 11,
            printVisible: false,
            audio: false,
            page: 1,
            total: 1,
            loadedRatio: 0,
            isError: false,
            isHtml: false,
            width: 518,
            height: 752,
            zoom: 1,
            rotateNum: 0,
            srcResult: `${location.origin}/static/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB.pdf`,
            pdfurlname: null,
            loading: false, // 加载中
            notSchema: true, // 为true表示目前没有在查表
            haveSchema: false, // 是否有填表
            showBack: true, // 是否显示返回按钮
            schemaUuid: '', // 用于查表的条件
            oneFormInfo: {}, // 查表查到的信息
            printing: false,
            download: false,
            target: null,
            point: {
                x: 0,
                y: 0
            },
            materialTemplateContent: {}, // acceptance传过来的材料的额外信息内容
            receiptMark: false,
            showDelete: false
        };
    },
    methods: {
        mousedown: function (e) {
            this.target = e.currentTarget;
            this.point = {
                x: e.clientX,
                y: e.clientY
            };
        },
        down: function () {
            // console.log(but)
            this.$nextTick((_) => {
                this.downloadPDF(document.getElementById('pdf_content'));
            });
            // window.but();
        },
        mousemove: function (e) {
            if (this.target) {
                this.target.scrollTop = this.target.scrollTop - (e.clientY - this.point.y);
                this.target.scrollLeft = this.target.scrollLeft - (e.clientX - this.point.x);

                this.point = {
                    x: e.clientX,
                    y: e.clientY
                };
            }
        },
        mouseup: function () {
            this.target = null;
        },
        // mousewheel: function (e) {
        //   e.wheelDelta < 0 ? this.small() : this.big()
        // },
        small: function () {
            this.zoom += 0.2;
            if (this.zoom > 1.8) {
                this.zoom = 1.8;
            }
        },
        big: function () {
            this.zoom -= 0.2;
            if (this.zoom < 0.2) {
                this.zoom = 0.2;
            }
        },
        rotate: function () {
            this.rotateNum += 90;
            if (this.rotateNum === 360) {
                this.rotateNum = 0;
            }
        },
        deleteFile: function () {
            this.$emit('deleteHandler', this.materialName);
        },
        show: function (uuid, materialTemplateContent, showDelete = false) {
            this.showDelete = showDelete;
            if (uuid) {
                this.schemaUuid = uuid;
                this.haveSchema = true;
                this.materialTemplateContent = materialTemplateContent;
                this.getschema();
            } else {
                this.haveSchema = false;
            }
            this.page = 1;
            this.isError = false;
            this.printVisible = true;
        },
        close: function () {
            this.zoom = 1;
            this.rotateNum = 0;
            this.page = 1;
            this.isError = false;
            this.printVisible = false;
            this.audio = false;
            this.srcResult = '';
            if (this.isAccept) {
                if (this.getAcceptAffair) {
                    this.getAcceptAffair();
                }
                this.isAccept = false;
            }
            // const flag = Array.from(['examine', 'onLineCheck']).map(item => this.$route.path.indexOf(item)).some(item => item > -1)
            // if (!flag) {
            //   this.reload()
            // }
        },
        print: function () {
            this.$refs.vuePdf.print();
            // if (this.src) {

            //   if (this.isHtml) {
            //     var el = document.getElementById("pdf_html_div");
            //     var iframe = document.createElement("IFRAME");
            //     var doc = null;
            //     iframe.setAttribute(
            //       "style",
            //       "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
            //     );
            //     document.body.appendChild(iframe);
            //     doc = iframe.contentWindow.document;
            //     doc.write(
            //       '<LINK rel="stylesheet" type="text/css" href="css/print.css">'
            //     );

            //     // el.innerHTML.replace('<table width="718px;" border="0" cellspacing="0" cellpadding="0" style="border-collapse:separate;border:none;padding:0;margin:0;table-layout:fixed;">', '<div style="height: 100%"><table width="718px;" border="0" cellspacing="0" cellpadding="0" style="border-collapse:separate;border:none;padding:0;margin:0;table-layout:fixed;">').replace('</table>', '</table></div>')
            //     doc.write("<div>" + el.innerHTML + "</div>");

            //     doc.close();
            //     iframe.contentWindow.focus();
            //     iframe.contentWindow.print();
            //     if (navigator.userAgent.indexOf("MSIE") > 0) {
            //       document.body.removeChild(iframe);
            //     }
            //   } else {
            //     this.$refs.vuePdf.print();
            //   }
            // } else {
            //   // this.$message.error('无PDF打印。')
            // }
        },
        pdfLoad: function (pdfDoc) {
            this.loading = false;
            console.log(this);
            this.total = pdfDoc.numPages;
            this.pdfurlname = pdfDoc.fingerprint;
        },
        pageChangeHandler: function (page) {
            console.log(page);
            this.page = page;
        },
        pageChange: function (value) {
            if (this.total) {
                this.page += value;
                if (this.page < 1) {
                    this.page = 1;
                } else if (this.page > this.total) {
                    this.page = this.total;
                }
            }
        },
        progress: function (a) {
            this.loadedRatio = a;
        },
        toPage: function () {
            const jump = document.getElementById('pdf_page').getElementsByClassName('el-pagination__jump')[0];
            if (jump) {
                const input = jump.getElementsByTagName('input')[0];
                if (input) {
                    this.page = parseInt(input.value);
                }
            }
        },
        next() {
            if (this.page <= this.total) {
                this.page = this.page + 1;
                this.$refs.vuePdf.renderPage(this.page);
            }
        },
        prev() {
            if (this.page > 1) {
                this.page--;
                this.$refs.vuePdf.renderPage(this.page);
            }
        },
        pdfError: function () {
            this.isError = true;
        },
        downLoadPdf: async function () {},
        downFile(blod, fsName = null) {
            // 如下方法 下载图片与pdf
            const url = window.URL.createObjectURL(new Blob([blod]));
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', fsName);
            document.body.appendChild(link);
            link.click();
        },
        getOneFormInfo() {
            this.notSchema = false;
            this.getschema();
        },
        getschema() {
            // let self = this
            // this.axios({
            //   method: 'post',
            //   url: this.$config.schemaServer + 'api/getoneforminfo',
            //   data: {
            //     'uuid': this.schemaUuid
            //   }
            // }).then(data => {
            //   self.oneFormInfo = data.data[0]
            // })
            setTimeout(() => {
                this.oneFormInfo = JSON.parse(this.materialTemplateContent);
            });
        },
        showPdfOrImg() {
            this.notSchema = true;
        }
    },
    computed: {
        ispdf: function () {
            return true;
        },
        pdfDiv: function () {
            let pdfDiv = null;
            if (this.ispdf) {
                pdfDiv = document.getElementById('vuePdf').getElementsByTagName('canvas')[0];
            } else {
                pdfDiv = document.getElementById('pdf_content_div');
            }
            return pdfDiv;
        }
    },
    watch: {
        src: function () {},
        printVisible: async function () {},
        zoom: function () {
            let pdfDiv = null;
            // 图片采用此方法控制放大缩小
            if (!this.ispdf) {
                pdfDiv = document.getElementById('pdf_content_div');
            }

            if (pdfDiv) {
                pdfDiv.style.width = this.width * (2 - this.zoom) + 'px';
                // pdfDiv.style.height = this.height * (2 - this.zoom) + 'px'
            }
        },
        rotateNum: function () {
            if (!this.ispdf && this.pdfDiv) {
                this.pdfDiv.style.transform = 'rotate(' + this.rotateNum + 'deg)';
            }
        }
    },
    components: {
        pdf
    },
    created() {},
    mounted() {
        console.log(this.$refs.vuePdf.total);
        this.total = this.$refs.vuePdf.total;
    }
};
</script>

<style lang="less">
.pdf_main {
    border: 1px solid red;
    width: 500px;
    height: 500px;
    .pdf_dialog {
        .el-dialog {
            background-color: transparent;
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
            width: 779px;
            height: 842px;
            .el-dialog__header {
                height: 0px;
                padding: 0px;
                border-bottom: none;
            }
            .el-dialog__body {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .pdf_dialog_main {
                display: flex;
                flex-direction: row;

                &:hover .page_button {
                    opacity: 1;
                }

                .page_button {
                    transition: 0.3s;
                    width: 60px;
                    height: 60px;
                    margin: auto;
                    position: relative;
                    top: 50%;
                    margin-top: -30px;
                    line-height: 60px;
                    color: rgba(255, 255, 255, 0.5);
                    font-size: 36px;
                    text-align: center;
                    border-radius: 60px;
                    background-color: rgba(0, 0, 0, 0.3);
                    opacity: 0;
                }
                .page_button-right {
                    top: 46.8%;
                }
                .el-close {
                    top: -20px;
                    right: 13px;
                }
                .hoverClass:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                }
            }
            .el-pagination button {
                padding: 0 6px;
            }
            .pdf_content {
                width: 579px;
                height: 842px;
                display: flex;
                flex-direction: column;
                background-color: white;
                justify-content: space-between;
                position: relative;
                .tips {
                    width: 360px;
                    height: 30px;
                    font-size: 20px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto auto;
                }
            }
            .pdf_left_btn {
                width: 100px;
            }
            .pdf_left_btn {
                width: 100px;
            }

            .pdf_div {
                margin: 25px 20px 0px 20px;
                flex: 1;
                overflow: auto;

                #vuePdf {
                    position: relative;
                    height: 100%;
                }

                .annotationLayer {
                    width: 0px !important;
                    height: 0px !important;
                }
            }
            .pdf_content:hover .pdfMenu {
                opacity: 1;
            }
            .pdf_footer {
                height: 60px;
                display: flex;
                flex-direction: row;

                .pdfMenu {
                    opacity: 0;
                    position: relative;
                    left: 501px;
                    width: 0;
                    transition: 0.3s;

                    > div {
                        cursor: pointer;
                        font-size: 22px;
                        margin-bottom: 20px;
                        width: 50px;
                        height: 50px;
                        color: white;
                        background-color: rgba(0, 0, 0, 0.3);
                        text-align: center;
                        line-height: 50px;
                        border-radius: 50px;
                        transition: 0.3s;

                        &:hover {
                            background-color: rgba(0, 0, 0, 0.5);
                        }
                    }
                }
            }

            .bottom_page {
                flex: 1;
                // padding-left: 20px;
                position: absolute;
                bottom: 23px;
                // left: -20px;

                .el-pagination__editor {
                    width: 50px;
                }
                .el-pagination span:not([class*='suffix']) {
                    height: 36px;
                    line-height: 36px;
                }
            }

            .bottom_btn {
                z-index: 9;
                // text-align: right;
                // padding-right: 20px;
                position: absolute;
                right: 8px;
                bottom: 20px;
                margin-right: 20px;
                // width: 160px;
            }
        }
    }
    .audio_dialog {
        .audio_dialog_main {
            margin-bottom: 30px;
        }
        .audio_dialog_btn {
            z-index: 9;
            text-align: right;
            padding-right: 20px;
            margin-top: 10px;
            .el-button {
                background: #f7fcfc;
                border: 1px solid #c1efeb;
                color: #000000;
                border-radius: 3px;
                padding: 0 15px;
                line-height: 30px;
                height: 30px;
                &:hover {
                    color: #fff;
                    background-color: #305fd0;
                    transition: none;
                }
                &:active {
                    background-color: #008377;
                }
            }
        }
    }
    /* modal 弹出位置 */
    .el-dialog__wrapper {
        text-align: center;
        white-space: inherit;
    }

    .el-dialog {
        position: initial;
    }

    .el-dialog__wrapper:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        width: 0;
    }

    .el-dialog__wrapper .el-dialog {
        display: inline-block;
        vertical-align: middle;
        top: 0;
        text-align: left;
        padding-bottom: 0px;
        margin-bottom: 0px;
        margin-top: 0px !important;
        transform: none;
        // position: initial;
        left: 0;
    }

    .el-dialog__body {
        padding: 0px;
    }
    /* modal 弹出位置 --end */
}
</style>
